﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>新增/修改项目</title>
    <link href="./css/bootstrapValidator.css" rel="stylesheet">
    <link href="./css/normalize.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
    <link href="./serviceItem/dist/summernote.css" rel="stylesheet">
    <script src="./js/jquery/jquery.js"></script>
    <script src="./js/bootstarp/bootstrap.js"></script>
    <script src="./js/bootstarp/bootstrapValidator.js"></script>
    <script src="serviceItem/dist/summernote.js"></script>
    <script src="serviceItem/dist/lang/summernote-zh-CN.js"></script>    <!-- 中文-->
    <script src="serviceItem/js/constants.js"></script>
    <script src="./js/language/zh_CN.js"></script>
    <script src="serviceItem/js/function.js"></script>
    <style>
        .m {
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .wh200 {
            width: 200px;
            height: 200px;
        }

        .wh10 {
            width: 10px;
            height: 10px;
        }

        .f_left {
            float: left;
        }

        #radio {
            width: 10px;
            height: 10px;
        }

    </style>

    <script>
        <!--jquery入口函数-->
        $(function () {
            //提交服务项
            $("#submit").click(function () {

                let serviceItemPage={
                    title:$("#title").val(),
                    titlePageImgUrl:$("#titleImg").prop("src"),
                    priceUnit:$("#priceUnit").val(),
                    priceOneHour:$("#priceOneHour").val(),
                    priceEmployee:$("#priceEmployee").val(),
                    priceOnce:$("#priceOnce").val(),
                    startWork:$("#startWork").val(),
                    offWork:$("#offWork").val(),
                    weekendWork:$("#weekendWork").val(),
                    setValidTime:$("#setValidTime").val(),
                    setIValidTime:$("#setIValidTime").val(),
                    tag:$("#tag").val()
                }
                //提交表单
                $.ajax({
                    url:SERVICEITEM_ADD,
                    type:"POST",
                    data:{
                        itemDetails:$('#summernote').summernote('code'),
                        itemPage:JSON.stringify(serviceItemPage),
                    },
                    success(res)
                    {
                        alert(res.msg)
                    },
                    error(res)
                    {
                        alert("没有连接到网络")
                    }
                })
            })
            //上传图片,获取url
            $("#file").change(function (){
                if (!$(this).val()){return}
                var fileData = new FormData();
                fileData.append("file", $('#file')[0].files[0]);
                console.log($('#file')[0].files[0])
                $.ajax({
                    url:IMG_UPLOAD_URL,
                    type: "POST",
                    contentType: false,
                    processData: false,
                    data:fileData,
                    success(res){
                        $("#titleImg").attr("src",JSON.parse(res.data).img_url);
                    }
                })
            })
            //重写summernote.js图片上传回调函数
            $('#summernote').summernote({
                height: 600,
                tabsize: 2,
                lang: 'zh-CN',
                //重写的图片上传回调函数
                callbacks: {
                    // onImageUpload callback
                    onImageUpload: function (files) {
                        // upload image to server and create imgNode...
                        var data = new FormData();
                        data.append("file", files[0]);
                        //通过ajax异步请求访问图片上传服务器，并替换img src属性地址
                        $.ajax({
                            data: data,
                            type: "POST",
                            url: IMG_UPLOAD_URL,
                            cache: false,
                            contentType: false,
                            processData: false,
                            dataType: "json",
                            success: function (res) {
                                //调用插入图片的方法,summernote(插入图片方法名,url,img标签名)
                                $('#summernote').summernote('insertImage', JSON.parse(res.data).img_url, 'img');
                            },
                            error: function () {
                                alert("上传失败");
                            }
                        });
                    }
                }
            });

            //规则校验
            $("#itemForm").bootstrapValidator({
                //通用错误提示信息
                message:"账号信息出错，请检查重试",
                //状态样式设置
                feedbackIcons:{
                    //有效值样式
                    valid:"glyphicon glyphicon-ok",
                    //错误值样式
                    invalid:"glyphicon glyphicon-remove",
                    //校验时的样式
                    validating: "glyphicon glyphicon-refresh"
                },
                //根据name属性值设置字段规则
                fields:{
                    title:{
                        message: "标题最大长度20",
                        validators:{
                            notEmpty:{message:"标题不能为空"},
                            stringLength:{
                                min: 2,
                                max: 20,
                                message:"标题长度在2-20之间"
                            }
                        }
                    },
                    titlePageImgUrl:{
                        message:"封面图片不是标准的图片文件",
                        validators: {
                            notEmpty: {message:"封面图片不能为空"}
                        }
                    },
                    priceUnit:{
                        message:"单价格式错误,只能为整数价格",
                        validators:{
                            notEmpty:{message:"单价不能为空"},
                        }
                    },
                    priceOneHour:{
                        message:"单价格式错误,只能为整数价格",
                        validators:{
                            notEmpty:{message:"单价不能为空"},
                        }
                    },
                    priceEmployee:{
                        message:"单价格式错误,只能为整数价格",
                        validators:{
                            notEmpty:{message:"单价不能为空"},
                        }
                    },
                    priceOnce:{
                        message:"单价格式错误,只能为整数价格",
                        validators:{
                            notEmpty:{message:"单价不能为空"},
                        }
                    }
                }
            })
        });
    </script>

</head>

<body>
<div class="container-fluid">
    <div class="row  cl" >
        <div class="" id="body">
            <header class="page-header bg-primary clearfix">
                <h3 class="text-center">美景家政信息平台</h3>
            </header>
            <form class="form-horizontal" id="itemForm">
                <!--标题-->
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label">标题</label>
                    <div class="col-sm-4">
                        <input type="text" name="title" class="form-control" id="title" placeholder="请输入项目标题，最大不超过20个字">
                    </div>
                </div>
                <!--封面图片-->
                <div class="form-group">
                    <label for="file" class="col-sm-2 control-label">封面图片</label>
                    <div class="col-sm-2">
                        <img src="#" class="wh200" id="titleImg">
                        <input type="file" name="file" class="form-control" id="file">
                    </div>
                </div>
                <!--详情-->
                <div class="form-group">
                    <label for="summernote" class="col-sm-2 control-label">详情</label>
                    <div class="m col-lg-5">
                        <div id="summernote"></div>
                    </div>
                </div>
                <!--面积单价-->
                <div class="form-group">
                    <label for="priceUnit" class="col-sm-2 control-label">面积单价</label>
                    <div class="col-sm-2 ">
                        <input type="number" name="priceUnit" class="form-control" id="priceUnit" placeholder="请输入面积单价">
                    </div>
                    <label class="control-label">元/平米</label>
                </div>
                <!--时长单价-->
                <div class="form-group">
                    <label for="priceOneHour" class="col-sm-2 control-label">时长单价</label>
                    <div class="col-sm-2">
                        <input type="number" name="priceOneHour" class="form-control" id="priceOneHour"
                               placeholder="请输入时长单价">
                    </div>
                    <label class=" control-label">元/小时</label>
                </div>
                <!--人数单价-->
                <div class="form-group">
                    <label for="priceEmployee" class="col-sm-2 control-label">人数单价</label>
                    <div class="col-sm-2">
                        <input type="number" name="priceEmployee" class="form-control" id="priceEmployee"
                               placeholder="请输入人数单价">
                    </div>
                    <label class=" control-label">元/人</label>
                </div>
                <!--频次-->
                <div class="form-group">
                    <label for="priceOnce" class="col-sm-2 control-label">频次</label>
                    <div class="col-sm-2">
                        <input type="number" name="priceOnce" class="form-control" id="priceOnce" placeholder="请输入每次价格">
                    </div>
                    <label class=" control-label">元/次</label>
                </div>
                <!--服务时间-->
                <div class="form-group">
                    <label for="startWork" class="col-sm-2 control-label">服务时间</label>
                    <div class="col-sm-2 f_left">
                        <input type="time" name="startWork" class="form-control" id="startWork">
                    </div>
                    <label class="control-label f_left">至</label>
                    <div class="col-sm-2 f_left">
                        <input type="time" name="offWork" class="form-control" id="offWork">
                    </div>
                    <div class="col-xs-1 f_left">
                        <input type="radio" name="weekendWork" onclick="changeRadio()" class="form-control" id="weekendWork" value="0">
                    </div>
                    <label class="control-label f_left">含周末</label>
                </div>
                <!--设置有效时间-->
                <div class="form-group">
                    <label for="setValidTime" class="col-sm-2 control-label">设置有效时间</label>
                    <div class="col-sm-2 f_left">
                        <input type="date" name="setValidTime" class="form-control" id="setValidTime">
                    </div>
                    <label class="control-label f_left">至</label>
                    <div class="col-sm-2 f_left">
                        <input type="date" name="setIValidTime" class="form-control" id="setIValidTime">
                    </div>
                </div>
                <!--标签-->
                <div class="form-group">
                    <label for="tag" class="col-sm-2 control-label">标签</label>
                    <div class="col-xs-1">
                        <select class="form-control" id="tag">
                            <option value="0">请选择标签</option>
                            <option value="1">服务好</option>
                            <option value="2">金牌保洁</option>
                            <option value="3">速度快</option>
                        </select>
                    </div>
                </div>
                <br><br><br><br>
                <!--留空防误触-->
                <div class="form-group row col-lg-1"></div>
                <div class="form-group">
                    <div class="col-lg-4"></div>
                    <div class="col-xs-5">
                        <button class="btn btn-default" onclick="cancel()">取消</button>
                        <button class="btn btn-primary" id="submit">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>